<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度 AI and Map</title>
    <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=PIHg7hLkryjeluelF75Grjjtr1RfgXYh"></script>
    <script src="./utils.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #container{
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container">

    </div>
    <!-- <script>
        // Protocol http:// 应答响应 request response
        // Domain api.map.baidu.com 二级域名
        // path /api 
        // QueryString 
        let url='http://api.map.baidu.com/api?type=webgl&v=1.0&ak=PIHg7hLkryjeluelF75Grjjtr1RfgXYh';
        // 分步
        // 1.QueryString 
        // let qs =url.split('?')[1];
        // console.log(url.indexOf('?'))
        let qsObj={};
        const qs=url.substring(url.indexOf('?')+1);
        let arrKey = qs.split('&');
        // console.log(arrKey);
        arrKey.forEach(function(entry){
            // console.log(entry);
            let arrVal=entry.split('=');
            console.log(arrVal);
            qsObj[arrVal[0]]=arrVal[1];
        })
        console.log(qsObj);
        // console.log(qs,'------');
        // 2.取出type ak 
    </script> -->
    <script>
        // let url='http://api.map.baidu.com/api?abc';
        // let url='http://api.map.baidu.com/api?type=webgl&v=1.0&ak=PIHg7hLkryjeluelF75Grjjtr1RfgXYh';
        // let qsResult=getQueryStringObj(url);
        // console.log(qsResult);
        var map = new BMapGL.Map('container');
        map.centerAndZoom('南昌',12);
        map.enableScrollWheelZoom(true);
        const data=[
            {
                log:115.832777,
                lat:28.724024,
                address:'东华理工大学',
                people:'杨执信',
                doTing:'打破就业纪录'
            },
            {
                log:115.832175,
                lat:28.737119,
                address:'江西财经大学',
                people:'刘天瞳',
                doTing:'腾讯大佬'
            },
            {
                log:116.025864,
                lat:28.686736,
                address:'江西科技学院',
                people:'李进杏',
                doTing:'百度大佬'
            }
        ]

        data.forEach(function(item){
            var marker = new BMapGL.Marker(
                new BMapGL.Point(
                    item.lon,
                    item.lat
                )
            )
            map.addOverlay(marker);
            let content=[item.address,item.people,item.doTing];
            addClickHandler(content,marker,map);
        });
        function addClickHandler(content,marker,map){
            marker.addEventListener('click',function(e){
                console.log(e,'-----');
            })
        }
    </script>
</body>
</html>